<template>
  <div id='wrap'>
    <h1>customRef</h1>
    <input type="text" v-model="text">
    <button @click="editCustomRef">修改自定义ref对象(防抖)</button>
    <hr>
    <input type="text" v-model="text1">
    <p>{{ text1 }}</p>
    <hr>
    <input type="text" v-model="text2" placeholder="请输入内容...">
    <p>{{ text2 }}</p>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu5'
}
</script>

<script lang='ts' setup>
import {useDebouncedRef,useDelayedRef,useUpperCaseRef} from "@/utils/UtilsFunction";
const text= useDebouncedRef('练习时长两年半',500)
const editCustomRef=()=>{
    text.value='鸡，你太美'
}
const text1=useUpperCaseRef('hello world')
const text2=useDelayedRef('',1000)
</script>

<style scoped lang='scss'>

</style>